<template>
  <div>
    <jxf-titletip :title="title" :hasGoBack="true" :hasRefresh="false" @goBack="$emit('goBack')"></jxf-titletip>
    <div class="basicInfo">
      <!-- 图片 账号信息 -->
      <el-row>
        <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="6" ref="imgArea" class="text-center">
          <div>
            <viewer :images="logo">
              <img :src="this.recordInfo.otherInfo ? this.recordInfo.otherInfo.userLogo : ''">
            </viewer>
          </div>
          <div>盛世金陵</div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="16" :lg="18" :xl="18" ref="basicInfo">
          <jxf-datalist :info="recordInfo.basicInfo"></jxf-datalist>
        </el-col>
      </el-row>
    </div>
    <!-- 成功 凭证资料 -->
    <div class="mt20" v-if="recordInfo.otherInfo.status == 1">
      <i class="jxf-likeIcon">凭证资料</i>
      <div class="textShow imgShow mt20">
        <el-row>
          <viewer :images="imagesArea">
            <el-col :xs="12" :sm="6" :md="6" :lg="4" :xl="4" v-for="(item, index) in recordInfo.otherInfo.proof ? recordInfo.otherInfo.proof.split(',') : []" :key="index">
              <img :src="item">
            </el-col>
          </viewer>
        </el-row>
      </div>
    </div>
    <!-- 失败 驳回原因 -->
    <div class="mt20" v-if="recordInfo.otherInfo.status == 2">
      <i class="jxf-likeIcon">驳回原因</i>
      <div class="textShow mt20">{{recordInfo.otherInfo.reason}}</div>
    </div>
  </div>
</template>

<script>
  import logo from '@/assets/logo.png'
    export default {
        name: "AuditRecord",
        props: {
          recordInfo: {
            type: Object,
            default: () => {}
          }
        },
        data() {
          return {
            imagesArea: this.recordInfo.otherInfo.proof ? this.recordInfo.otherInfo.proof.split(',') : [],
            title: "线下充值审核记录",
            logo: this.recordInfo.otherInfo.proof ? this.recordInfo.otherInfo.userLogo ? this.recordInfo.otherInfo.userLogo.split(',') : [] : [],
          }
        },
        mounted() {
          this.$refs['imgArea'].$el.style.padding = '20px'
          this.$refs['imgArea'].$el.style.display = 'flex'
          this.$refs['imgArea'].$el.style.justifyContent = 'center'
          this.$refs['imgArea'].$el.style.flexDirection = 'column'
          this.$refs['imgArea'].$el.style.height = this.$refs['basicInfo'].$el.clientHeight;
          // this.$refs['imgArea'].$el.style.height = this.$refs['imgArea'].$el.style.clientHeight;
          this.$refs['imgArea'].$el.style.lineHeight = this.$refs['imgArea'].$el.style.height;
        }
    }
</script>

<style lang="scss" scoped>
.basicInfo {
  margin-top: 20px;
  border: 1px solid #ebebeb;
  img {
    width: 160px;
    height: 160px;
  }
}
.textShow {
  padding: 10px 0 0 20px;
  min-height: 200px;
  font-size: 14px;
  color: #666;
  border: 1px solid #ebebeb;
  background: #fff;
}
  .imgShow {
    /*display: flex;*/
    img {
      width: 160px;
      height: 160px;
    }
  }
</style>
